<template>
  <div id="app">
    <!-- 导航栏 -->
    <div class="nav">
      <router-link class="navItem" active-class="current" to="/" exact
        >商铺货物</router-link
      >
      <router-link class="navItem" active-class="current" to="/shopMsg" exact
        >商铺信息</router-link
      >
      <router-link class="navItem" active-class="current" to="/shopActive" exact
        >商铺动态</router-link
      >
      <router-link class="navItem" active-class="current" to="/shopOder" exact
        >商铺订单</router-link
      >
    </div>
    <!-- 内容区域 -->
    <router-view class="navContent"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    // HelloWorld
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
  width: 100%;
}
.nav {
  height: 80px;
  width: 100%;
  background-color: dimgray;
  display: flex;
  justify-content: center;
}
.navItem {
  display: inline-block;
  height: 100%;
  width: 120px;
  text-decoration: none;
  color: aliceblue;
  margin: 0 30px;
  text-align: center;
  line-height: 80px;
}
.current {
  background-color: rgba(150, 200, 250, 0.5);
}
.navContent {
  width: 1000px;
  margin: 0 auto;
}
</style>
